<template>
  <!-- <div>授权可查询区域列表</div> -->

  <div class="shop">
    <div class="top">
      <el-button size="small" type="primary" @click="isShowAddCategory = true">新增用户</el-button>
      <el-button class="search" size="small" type="primary" @click="searchCategoryData">搜索</el-button>

      <el-input
        class="search input"
        size="small"
        v-model="form.cate_id"
        placeholder="输入id查询"
        clearable
      ></el-input>
      <el-input
        class="search input"
        size="small"
        v-model="form.cate_name"
        placeholder="输入分类名称查询"
        clearable
      ></el-input>
    </div>

    <el-table
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="用户ID" prop="id"></el-table-column>
      <el-table-column label="用户手机号" prop="mobile"></el-table-column>
      <el-table-column label="用户名称" prop="username"></el-table-column>
      <el-table-column label="加入时间" prop="created_at"></el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
      <el-table-column label="操作" prop="id">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="changeShopCate(scope.row.id)">编辑</el-button>
          <!--<el-button size='mini'-->
          <!--@click="gotoSaleDaily(scope.row.id)">销售日志</el-button>-->
          <el-button size="mini" @click="deleteShopCate(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
    <jdialog title="新增用户" :visible.sync="isShowAddCategory" width="840px">
      <el-form :model="cateForm" :rules="rules" class="demo-ruleForm" label-width="140px">
        <el-form-item label="手机号：" prop="mobile">
          <el-input
            v-model="cateForm.mobile"
            style="width:320px;"
            size="mini"
            maxlength="11"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>

        <el-form-item label="备注：" prop="remark">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="cateForm.remark"></el-input>
        </el-form-item>
        <hr />
        <el-form-item label="可查询省份：">
          <br />
          <input type="checkbox" v-model="checked" v-on:click="checkedAll" /> 全选23个省，5个自治区，4个直辖市，2个特别行政区
          <div style="margin: 15px 0;"></div>
          <template v-for="(list,index) in checkboxList">
            <div :key="index" class="divstyle">
              <input type="checkbox" v-model="checkList" :value="list.id" class="checkboxstyle" />
              <span class="spanstyle">{{list.name}}</span>
            </div>
          </template>
        </el-form-item>
      </el-form>

      <div class="align">
        <el-button size="mini" @click="cl_btn">取消</el-button>
        <el-button size="mini" type="primary" @click="certainAddCategory">确定</el-button>
      </div>
    </jdialog>
  </div>
</template>


<script>
// import {
//   getAreaList,
//   addAreaUser,
//   getUserAreaList,
//   getUserAreaDetail,
//   updateAreaUser,
//   dedeleUserArea
// } from "@/api/service";
export default {
  data() {
    return {
      checkboxList: [],
      checkList: [],
      checked: false,
      checkAll: false,

      showCate_id: "",
      isShowAddCategory: false,
      selectedItems: [],
      form: {
        mobile: "",
        page: 1,
        size: 20
      },
      editid: "",

      total: 0,
      tableData: [],
      cateForm: {
        remark: "",
        mobile: ""
      },
      rules: {
        mobile: [{ required: true, message: "请添加手机号", trigger: "blur" }],
        remark: [{ required: true, message: "请添加描述", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getsupplyproductCateListData();
    this.getAreaList();
  },
  methods: {
    checkedAll: function() {
      var _this = this;
      console.log(_this.checkList);
      console.log(_this.checked);
      this.$nextTick(function() {
        // DOM 现在更新了
        console.log(_this.checked);
      });
      if (_this.checked) {
        //实现反选
        _this.checkList = [];
      } else {
        //实现全选
        _this.checkList = [];
        _this.checkboxList.forEach(function(item, index) {
          console.log(index);
          _this.checkList.push(item.id);
        });
      }
    },
    // 关闭模态框
    cl_btn() {
      this.isShowAddCategory = false;
      this.cateForm = {
        remark: "",
        mobile: ""
      };
      this.checkList = [];
      this.editid = "";
    },

    //搜索数据
    searchCategoryData() {
      this.getsupplyproductCateListData();
    },
    pageChange(page) {
      this.form.page = page;
      //获取更多数据
      this.getsupplyproductCateListData();
    },
    async getsupplyproductCateListData() {
      let url = "page=" + this.form.page + "&mobile=" + this.form.mobile;
      let res = await getUserAreaList(url);
      if (res.code === 10000) {
        this.tableData = res.data.data;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    },
    // 区域获取
    async getAreaList() {
      let res = await getAreaList();
      this.checkboxList = res;
    },
    // 新增用户
    async certainAddCategory() {
      let form;
      let res;
      if (this.editid) {
        form = {
          remark: this.cateForm.remark,
          permission_data: this.checkList,
          id: this.editid
        };
        res = await updateAreaUser(form);
      } else {
        form = {
          mobile: this.cateForm.mobile,
          remark: this.cateForm.remark,
          permission_data: this.checkList
        };
        res = await addAreaUser(form);
      }

      if (res.code === 10000) {
        this.$message.success(res.message);
        this.getsupplyproductCateListData();
        this.isShowAddCategory = false;
      } else {
        this.$message.error(res.message);
      }
    },

    // 编辑
    async changeShopCate(id) {
      this.isShowAddCategory = true;
      let res = await getUserAreaDetail(id);
      this.cateForm.mobile = res.data.mobile;
      this.cateForm.remark = res.data.remark;
      this.checkList = res.data.permission_data;
      this.editid = id;
    },
    // 删除
    deleteShopCate(id) {
      this.$confirm("确认删除该用户？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.getproductCouponIdDeleteData(id);
        })
        .catch(() => {
          console.log("cancel");
        });
    },
    async getproductCouponIdDeleteData(id) {
      let res = await dedeleUserArea(id);
      if (res.code === 10000) {
        this.$message.success(res.message);
        this.getsupplyproductCateListData();
      } else {
        this.$message.error(res.message);
      }
    },
    // 上一页
    goBack() {
      this.$router.go(-1);
    },

    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    }
  },
  watch: {
    //深度 watcher
    checkList: {
      handler: function(val, oldVal) {
        console.log(oldVal, val);
        if (val.length === this.checkboxList.length) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      },
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;

  .top {
    margin-bottom: 20px;

    .search {
      float: right;
      margin-left: 12px;
    }

    .input {
      width: 150px;
    }
  }

  .cetain {
    color: #f4222d;
  }

  .pagination {
    float: right;
    margin-top: 12px;
  }

  .icon_cate {
    float: left;
  }

  .demo-ruleForm {
    padding: 20px;
  }

  .note {
    color: #666666;
    font-size: 14px;
    margin-top: 28px;
  }

  .align {
    text-align: center;
    margin-bottom: 20px;
  }
}
.divstyle {
  display: inline-block;
  width: 150px;
}
.checkboxstyle {
  margin-right: 10px;
}
.spanstyle {
  width: 100px;
  display: inline-block;
  position: relative;
  top: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 20px;
}
</style>
